<template>
    <div class="panel">
        <div class="panel-heading hr-bottom m-b-0">
            {{header}} <span class="pull-right label m-t-5" :class="labelClass">{{label}}</span>
        </div>
        <div class="panel-body">
            <p class="pp">{{number}}</p>
            <span>{{type}}</span>
            <span class="pull-right">{{ratio}} <i class="fa" :class="icon"></i></span>
        </div>
    </div>
</template>

<script>
    export default {
    	name: 'DataCard',
        props: {
            header: {},
            label: {},
            labelClass: {},
            number: {type: String},
            type: {},
            icon: {},
            ratio: {}
        }
    };
</script>

<style scoped="">
    .pp{font-weight: 100;line-height: 1.1;font-size: 30px; margin-bottom: 5px}
</style>
